import Taro, { Component } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'

import ear from '@assets/images/listener.png'
import { transNumber } from '@utils'

import './index.scss'

class GridList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      imgSrc: ear
    }
  }
  render() { 
    return (
      <View className='grid-list'>
        {
          this.props.list.map((item, index) => {
            return (
              <View className='list' key={item + index}>
                <Image src={item.picUrl} className='picture' />
                <Text className='text'>{item.name}</Text>
                <View class='top-right' style={{display: this.props.showTop ? 'block' : 'none'}}>
                  <Image src={this.state.imgSrc} className='icon' />
                  <Text>{transNumber(item.playCount)}</Text>
                </View>
              </View>     
            )
          })
        }
      </View>
    )
  }
}

GridList.defaultProps = {
  list: [],
  showTop: false
}
 
export default GridList
